<template>
  <div class="goodsDetails-container">
    <!-- 购物车小球 -->
    <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>

    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<lunbotu :lunboList="lunboList" :isfull="false"></lunbotu>
					</div>
				</div>
		</div>
		<div class="info" v-for="item in infoList" :key="item.id">
			<div class="mui-card">
				<div class="mui-card-header">
					<h1>{{ item.title }}</h1>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">市场价：<span class="market_price">￥{{ item.market_price }}</span>销售价:<span class="sell_price">￥{{ item.sell_price }}</span></p>
						<!-- mui数字输入框 -->
            <!-- 父组件向子组件传值 props -->
						购买数量：<numbox @getCount="getSelectCount" :max="item.stock_quantity"></numbox>						
						<div class="btn">
							<mt-button type="primary">立即购买</mt-button>
							<mt-button type="danger" @click="addToCart">加入购物车</mt-button>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{ item.goods_no }}</p>
						<p>库存情况：{{ item.stock_quantity }}件</p>
						<p>上架时间：{{ item.add_time | dateFormat }}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
					<mt-button type="danger" size="large" plain @click="goComments(id)">商品评论</mt-button>
				</div>
			</div>
		</div>
  </div>
</template>
<script>
import lunbotu from "../subcomponents/lunbotu.vue";
import numbox from "../subcomponents/goodsDetails_numbox.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      lunboList: [],
      infoList: [],
      ballFlag: false,
      selectCount: 1 //保存商品的数量，默认用户选择为1
    };
  },
  created() {
    this.getLunbo();
    this.getGoodsInfo();
  },
  methods: {
    getLunbo() {
      this.$http.get("api/getthumimages/" + this.id).then(result => {
        if (result.body.status === 0) {
          this.lunboList = result.body.message;
        }
      });
    },
    getGoodsInfo() {
      this.$http.get("api/goods/getinfo/" + this.id).then(result => {
        if (result.body.status === 0) {
          this.infoList = result.body.message;
        }
      });
    },
    goDesc(id) {
      // 使用编程式导航$router.push({name:'',params:{}})点击跳转图文介绍页面
      /* 带查询参数的地址：$router.push({path:"/path/$id"}) 可以得到正确地址，但是path和params结合会忽略params的值，但是path和query的组合不属于这个情况 
			name是给路由取个别名。命名路由，省得写完整的路由地址了
			*/
      this.$router.push({ name: "goDesc", params: { id } });
    },
    goComments(id) {
      // 点击跳转评论页面
      this.$router.push({ name: "goComments", params: { id } });
    },
    addToCart() {
      /* 加入购物车 */
      this.ballFlag = !this.ballFlag;
      console.log(this.selectCount); //父组件使用子组件的值
    },
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth; //offsetWidth 否则没有动画
      /* 当分辨率改变或者向上滚动页面后，translate的值是固定的，所以小球无法准确到达购物车的位置
      所以位移的距离不能固定，获取徽标和小球的位置，然后进行计算，使用js中getBoundingClientRect  在Dom中，与组件没有任何关系，通过Dom可以获取页面中的所有元素 同一组件中的Dom元素可以通过$refs来获取
       */
      //获取小球的坐标
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      //获取徽标的坐标
      const hbPosition = document.getElementById("hb").getBoundingClientRect();
      //获取坐标差
      const xPos = hbPosition.left - ballPosition.left;
      const yPos = hbPosition.top - ballPosition.top;
      //使用es6的模板字符串进行变量的书写  `${占位符}`
      el.style.transform = `translate(${xPos}px,${yPos}px)`;
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)"; //cubic-bezier(.4,-0.3,1,.68)曲线运动 贝塞尔曲线
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    },
    getSelectCount(count) {
      /* 因为选择框numbox和goodDetails不是属于同一组件，所以涉及到父子组件传值 */
      this.selectCount = count;
    }
  },
  components: {
    lunbotu,
    numbox
  }
};
</script>
<style lang="scss" scoped>
.goodsDetails-container {
  .mui-card-header {
    h1 {
      font-size: 20px;
      font-weight: normal;
    }
  }
  .price {
    margin-bottom: 10px;
    color: #000;
    font-size: 15px;
    .market_price {
      text-decoration: line-through;
      margin-right: 10px;
    }
    .sell_price {
      font-size: 18px;
      font-weight: 700;
      color: #ee4f4e;
    }
  }
  .btn {
    margin-top: 10px;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 10px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    left: 150px;
    top: 436px;
    transform: translate(0, 0);
  }
}
</style>

